<template>
  <div class="icons">
    <div class="mui-slider">
      <div class="mui-slider-group">
        <div class="mui-slider-item" v-for="(page,index) in pages" :key="index"> 
            <div class="icon" v-for="item in page" :key="item.id">
                <router-link :to="item.rou">
                    <div class="icon-div">
                       <!-- 不用v-bind  那就是一个变量  用 v-bind  会去下面找 -->
                     <img :src="item.imgUrl" alt class="icon-content">
                     <!-- 写在标签内部就用""  写在外面用{{}} -->
                    </div> 
                    <p>{{item.word}}</p>
                </router-link>
            </div>    
        </div>
 
        <!-- <div class="mui-slider-item">
           <div class="icon">
              <div class="icon-div">
                <img src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt class="icon-content">
              </div> 
              <p>热门景点</p>
          </div>   
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>

//子组件的data一定要是个函数
export default {
    name:"Icons",
    data(){
        return{
            iconList:[{
                id:"001",
                imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
                word:"新闻资讯",
                rou:"/Newslist"
            },{
                id:"002",
                imgUrl:"http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png",
                word:"图片分享",
                rou:"/Pic"
            },{
                id:"003",
                imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png",
                word:"商品购买",
                rou:"/Goods"
            },{
                id:"004",
                imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/47/c2b659e048b11602.png",
                word:"留言反馈",
                rou:"/Pic"
            },{
                id:"005",
                imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/bd/9f7b9b2b60c1502.png",
                word:"视频专区",
                rou:"/Pic"
            },{
                id:"006",
                imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/c1/6f15f887179fa002.png",
                word:"联系我们",
                rou:"/Pic"
            }] 
        }
    },
    computed:{
        pages(){
            const pages = []
            this.iconList.forEach((item,index) => {
                const page = Math.floor(index/8)
                //下面不懂！！！!!!!!!!!!!!！！！！！！！！！！！
                if(!pages[page]){
                    pages[page] = []
                }
                pages[page].push(item)
            });
            return pages
        }
    }
}
</script>
<style scoped>
    .icons{
        /* margin-bottom:0.2rem;  */
        width: 100%;
        overflow: hidden;
        background-color: #fff;

    }
    .icon{
        text-align: center;
        float: left;
        height: 1.8rem;
        width: 25%;
        /* background-color: yellow; */
    }
    .icon-div{
        margin-top: 0.2rem;
        display: inline-block;
        text-align: center;
        height: 1rem;
        width: 1rem;
    }
    .icon p{
        color: black;
        font-size: 0.28rem;
    }
    div ul{
        overflow: hidden;
        width: 100%;
    }
   
</style>
